<template>
    <el-row :gutter="20" justify="space-between" align="center">
        <el-col :span="4">
            <div class="grid-content home-header-title">
                <span>早教指南</span>
            </div>  
        </el-col>
        <el-col :span="15">
        <div class="grid-content">
            <el-menu
                router
                unique-opened 
                mode="horizontal"
                default-active="home" 
                menu-trigger="hover"
                background-color="#121313"
                text-color="#c9c9dd"
                active-text-color="#ffd04b"
                :collapse="isCollapse">
                <el-menu-item index="/home">
                    <el-icon><i-home-filled /></el-icon>
                    <template #title>首页</template>
                </el-menu-item>
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon><i-notebook /></el-icon>
                        <span>语文</span>
                    </template>
                    <el-menu-item index="/letter">
                        <template #title>
                            <el-icon><i-reading /></el-icon>
                            <span>拼音</span>
                        </template>
                    </el-menu-item>
                </el-sub-menu>
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon><i-notebook /></el-icon>
                        <span>数学</span>
                    </template>
                    <el-menu-item index="/number">
                        <template #title>
                        <el-icon><i-reading /></el-icon>
                        <span>数字</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="/math">
                        <template #title>
                        <el-icon><i-plus /></el-icon>
                        <span>四则运算</span>
                        </template>
                    </el-menu-item>
                </el-sub-menu>
                <el-menu-item index="/about">
                    <el-icon><i-help /></el-icon>
                    <template #title>关于</template>
                </el-menu-item>
            </el-menu>
        </div>
        </el-col>
        <el-col :span="5"> 
        <div class="grid-content">
            <el-divider direction="vertical"></el-divider>
            <el-dropdown>
                <span class="dropdown-user">
                    <el-icon><i-user /></el-icon>
                    <span>午阳</span> 
                    <el-icon class="el-icon--right"><i-arrow-down /></el-icon>
                </span> 
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>个人信息</el-dropdown-item>
                        <el-dropdown-item>退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <el-divider direction="vertical"></el-divider>
            <span>在线人数：5 </span>
        </div>
        </el-col>
    </el-row>
</template>

<script>
export default {
  name: 'edu-header'
}
</script>

<style scoped>
.home-header-title {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-family: cursive;
    color: mistyrose;
}
.dropdown-user {
    color: var(--el-color-info-light);
}
</style>>